<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 64
})
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="approval-icon"
  >
    <!-- 徽章背景圆 -->
    <circle
      cx="32"
      cy="32"
      r="24"
      fill="url(#approval-gradient-bg)"
    />
    <!-- 徽章边缘装饰 -->
    <circle
      cx="32"
      cy="32"
      r="22"
      fill="none"
      stroke="white"
      stroke-width="2"
      opacity="0.3"
    />
    <!-- 勾选标记 -->
    <path
      d="M20 32L28 40L44 24"
      stroke="white"
      stroke-width="4"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <!-- 星星装饰1 -->
    <path
      d="M32 8L33 11L36 11L34 13L35 16L32 14L29 16L30 13L28 11L31 11L32 8Z"
      fill="#FFD700"
    />
    <!-- 星星装饰2 -->
    <path
      d="M12 28L13 30L15 30L14 32L15 34L12 33L10 34L11 32L9 30L11 30L12 28Z"
      fill="#FFD700"
      opacity="0.8"
    />
    <!-- 星星装饰3 -->
    <path
      d="M52 36L53 38L55 38L54 40L55 42L52 41L50 42L51 40L49 38L51 38L52 36Z"
      fill="#FFD700"
      opacity="0.8"
    />

    <!-- 渐变定义 -->
    <defs>
      <linearGradient id="approval-gradient-bg" x1="8" y1="8" x2="56" y2="56" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#4facfe" />
        <stop offset="50%" stop-color="#00f2fe" />
        <stop offset="100%" stop-color="#7ee8fa" />
      </linearGradient>
    </defs>
  </svg>
</template>

<style scoped>
.approval-icon {
  filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.3));
  transition: transform 0.3s ease;
}

.approval-icon:hover {
  transform: scale(1.05) rotate(5deg);
}
</style>
